/* 1. data생성하기.
* 2. 모델 생성하기.
* 3. 스토어 생성후 data를  store에 연결.
* 4. 리스트 생성하기.
* 5. Panel에 리스트 추가하기.
*/
Ext.setup({
   tabletStartupScreen:"./tabletStartupScreen.png",
   phoneStartupScreen:"./phoneStartupScreen.png",
   tabletIcon:"./tabletIcon.png",
   phoneIcon:"./phoneIcon.png",
   glossOnIcon: true,
   statusBarStyle:"black",
   fullscreen:true,
   preloadImages:[],
   scope:this,
   onReady: function() {
       	/*
		 * 1. data생성하기.
		 */
       var initData = function() {
           var data= new Array();
           for(var i = 0; i < 40; i++) {
               var item={};
               item["name"]	= "name_" + i;
               item["url"]	= "images/" + (1 + (i % 10)) + ".gif";
               item["size"]	= Math.floor(Math.random() * 1000);
               data.push(item);
           }
           return data;
       };
       var objData = initData();
       /*
		 * 
		 * 2. 모델 생성하기.
		 * 
		 */
       Ext.regModel('mydata', {
           fields: ['name', 'url', 'size','lastmod']
       });
       	/*
		 * 3. 스토어 생성후 data를 store에 연결.
		 */
       var objStore = new Ext.data.JsonStore({
           model:"mydata",
           autoLoad:true,
           data:objData
       });
       console.log(objStore);
       	/*
		 * 4.리스트 생성하기.
		 */
       var objList= new Ext.List({        
           store: objStore,
           selectedItemCls:"x-list-over",
           // 아이템 템플릿
           itemTpl: '<div class="contact"><strong>name : {name}</strong>,  size : {size}, <br/> <img width="24" src="{url}" title="{name}" class="image"></div>',
       });
       	/*
		 * 5. Panel에 리스트 추가하기.
		 */
       new Ext.Panel({
           fullscreen: true,  
           scroll:"vertical",
           layout:"fit",
           items:objList,
           dockedItems: [{
                    dock : 'top',
                    xtype: 'toolbar',
                    title: 'List Sample 1'
           	}]
       })
	}
});